import React from './core/React.js'

// const App = React.createElement('div',{ id : 'app' }, "hi，",'leo-react');

let count = 10
let props = {id:111111}
function Counter({ num }) {
    const update = React.update()
    function handlerClick() {
        props = {}
        count++
        update()
    }
    return (
        <div {...props}>
            Count:{count}
            <button onClick={handlerClick}>click</button>
        </div>
    )
}

let showBar = false
function Example () {
    function Foo() {
        return <div>foo</div>
    }
    const bar = <p>bar</p>
    
    // const foo = <div>foo</div>
    
    const update = React.update()
    function handlerShowBar() {
        showBar = !showBar
        update()
    }
    return (
        <div>
            {/* <div>{ showBar ? bar : foo }</div> */}
            <div>{ showBar ? bar : <Foo></Foo>}</div>
            <button onClick={handlerShowBar}>showBar</button>
        </div>
    )
}

let showBar2 = false
function Example2() {
    const foo = (
        <div>
            foo
            <div>child1</div>
            <div>child2</div>
        </div>
    )
    const bar = <div>bar</div>
    const update = React.update()
    function handlerClick2() {
        showBar2 = !showBar2
        update()
    }
    return (
        <div>
            <div>{ showBar2 ? bar : foo}</div>
            <button onClick={handlerClick2}>showBar2</button>
        </div>
    )
}

let showBar3 = false
function Example3() {
    const bar = <div>bar</div>
    const update = React.update()
    function handlerClick3() {
        showBar3 = !showBar3
        update()
    }
    return (
        <div>
            Example
            { showBar3 && bar }
            <button onClick={handlerClick3}>showBar3</button>
        </div>
    )
}

let countBar4 = 0
function Bar4(){
    console.log('Bar4 run');
    const update = React.update()
    function clickBar4() {
        countBar4++
        update()
    }
    return (
        <div>
            Bar4: 
            {countBar4}
            <button onClick={clickBar4}>click</button>
        </div>
    )
}
let countFoo4 = 0

function Foo4(){
    console.log('Foo4 run');
    const update = React.update()
    function clickFoo4() {
        countFoo4++
        update()
    }
    return (
        <div>
            Foo4: 
            {countFoo4}
            <button onClick={clickFoo4}>click</button>
        </div>
    )
}

// 使用useState
// 使用useEffect
function Example4() {
    const [count,setCount] = React.useState(10)
    const [name,setName] = React.useState('hi,')
    function handlerClick4() {
        setCount((c) => c + 1)
    }
    function handlerClick5() {
        setName('hi,useState')
    }
    React.useEffect(() => {
        console.log('init');
        return () => {
            console.log('cleanup 0');
        }
    },[])
    React.useEffect(() => {
        console.log('update',count);
        return () => {
            console.log('cleanup 1');
        }
    },[count])
    React.useEffect(() => {
        console.log('update',count);
        return () => {
            console.log('cleanup 2');
        }
    },[count])
    return (
        <div>
            {count}
            <button onClick={ handlerClick4 }>click</button>
            <br />
            {name}
            <button onClick={ handlerClick5 }>click</button>
        </div>
    )
}

let countRoot = 0

function App() {
    console.log('App run');
    const update = React.update()
    function handRootClick() {
        countRoot++
        update()
    }
    return (
        <div>
            hi,leo-react 
            <Counter num={ 10 }></Counter>
            <hr></hr>
            <Example></Example>
            <hr></hr>
            <Example2></Example2>
            <hr></hr>
            <Example3></Example3>
            <hr></hr>
            <div>
                hi-mini-react--count :{ countRoot }
                <button onClick={handRootClick}>click</button>
                <Bar4></Bar4>
                <Foo4></Foo4>
            </div>
            <hr></hr>
            <Example4></Example4>
        </div>
    )
}

export default App;